<route lang="json5">
{
  meta: {
    auth: false,
    hidden: true,
    layout: 'Empty',
    title: '登录',
  },
}
</route>

<template>
  <div class="h-full w-full flex items-center justify-center select-none">
    <div class="w-[42rem] h-[24rem] rounded-xl overflow-hidden relative">
      <div
        :class="[
          'transition-all duration-1000',
          'w-2/3 h-full absolute top-0 !border-none',
          'bg-[#bbded6] bg-opacity-20',
          ' flex items-center justify-center ',
          data.isLogin ? 'left-0' : 'left-1/3',
        ]"
      >
        <a-form ref="formRef" class="px-6 rounded m-auto" :model="data" auto-label-width @submit="handleSubmit">
          <a-form-item>
            <div>
              <p class="text-xl font-bold flex items-center">
                Yi Ke Xiao Bai Cai
                <label class="swap swap-flip ml-2">
                  <input type="checkbox" />
                  <div class="swap-on">😈</div>
                  <div class="swap-off">😇</div>
                </label>
              </p>
              <p class="text-sm text-gray-500">a pakchoi</p>
            </div>
          </a-form-item>
          <a-form-item field="account" :rules="{ required: true, message: '账号不能为空' }" hide-asterisk>
            <a-input v-model="data.account" placeholder="账号" allow-clear>
              <template #prefix>
                <Icon icon="mdi:account-outline" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item field="password" :rules="{ required: true, message: '密码不能为空' }" hide-asterisk>
            <a-input-password v-model="data.password" placeholder="密码" allow-clear>
              <template #prefix>
                <Icon icon="mdi:password-outline" />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item class="mt-4">
            <a-button type="secondary" long html-type="submit">
              {{ data.isLogin ? '登录' : '注册并登录' }}
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div
        :class="[
          'transition-all duration-1000',
          'opacity-95 w-1/3 h-full absolute top-0 left-0',
          'bg-[rgb(185,195,246,0.6)] ',
          data.isLogin ? 'left-2/3' : 'left-0',
        ]"
      >
        <transition name="fade" mode="out-in">
          <div class="px-4 h-full flex flex-col gap-y-4 items-center justify-center text-white" v-if="data.isLogin">
            <div class="text-2xl font-bold">你好，朋友!</div>
            <p class="text-sm">没有账号？开始注册。</p>
            <button @click="handleChangeIsLogin(false)" className="btn btn-xs btn-ghost rounded">去注册</button>
          </div>
          <div class="px-4 h-full flex flex-col gap-y-4 items-center justify-center text-white" v-else>
            <div class="text-2xl font-bold">欢迎回来!</div>
            <p class="text-sm">已经有账户了？去登录我的账户。</p>
            <button @click="handleChangeIsLogin(true)" className="btn btn-xs btn-ghost rounded">去登录</button>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BASE_HOME } from '@/conf'

const { logIn } = useAccount()
const router = useRouter()
const formRef = ref()
const data = reactive({
  account: '',
  password: '',
  isLogin: true,
})

async function handleSubmit({ errors }: any) {
  if (errors) return
  await logIn(data)
  router.push({ name: BASE_HOME })
}

function handleChangeIsLogin(isLogin: boolean) {
  Object.assign(data, { isLogin })
  formRef.value?.resetFields()
}
</script>
